<template>
  <div class="home-page">
    <!-- 顶部搜索区域 -->
    <header class="top-header">
      <div class="header-content">
        <div class="brand">
          <div class="logo">
            <svg viewBox="0 0 48 48" fill="none">
              <defs>
                <linearGradient id="water-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                  <stop offset="0%" stop-color="#00d4ff"/>
                  <stop offset="100%" stop-color="#0066ff"/>
                </linearGradient>
              </defs>
              <path d="M24 6c0 0-14 12-14 24a14 14 0 0 0 28 0c0-12-14-24-14-24z" fill="url(#water-gradient)"/>
              <path d="M18 28c0 3.3 2.7 6 6 6s6-2.7 6-6" stroke="white" stroke-width="2.5" stroke-linecap="round" fill="none"/>
            </svg>
          </div>
          <span class="brand-name">知汛助手</span>
        </div>
        
        <!-- 搜索框 -->
        <div class="search-wrapper">
          <SearchBox 
            ref="searchBoxRef"
            @select="handleSelect"
            @search="handleSearch"
            :placeholder="'搜索测站名称、编码、别名...'"
          />
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 详情弹层 -->
      <div v-if="selectedStation || isLoadingDetail" class="detail-overlay" @click.self="clearDetail">
        <div class="detail-modal">
          <div v-if="isLoadingDetail" class="detail-loading">
            <div class="loading-spinner"></div>
            <span>加载中...</span>
          </div>
          <StationDetail 
            v-else
            :station="stationDetail" 
            @close="clearDetail"
            @view-map="handleViewMap"
          />
        </div>
      </div>

      <!-- 快捷功能区 -->
      <QuickActions @action="handleAction" />

      <!-- 热门搜索 -->
      <HotSearch @search="handleQuickSearch" />

      <!-- 数据看板 -->
      <Dashboard @click="handleDashboardClick" />

      <!-- 推荐测站 -->
      <StationCards 
        title="推荐测站"
        @select="handleSelectStation" 
        @more="handleMoreStations"
      />

      <!-- 最近访问 -->
      <RecentVisits 
        ref="recentVisitsRef"
        @select="handleSelectStation"
      />

      <!-- 公告通知 -->
      <Announcements 
        @click="handleAnnouncementClick"
        @more="handleMoreAnnouncements"
      />
    </main>

    <!-- 底部 -->
    <footer class="page-footer">
      <div class="footer-content">
        <span>智水慧成 © 2025</span>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import SearchBox from './SearchBox.vue'
import StationDetail from './StationDetail.vue'
import QuickActions from './components/QuickActions.vue'
import HotSearch from './components/HotSearch.vue'
import Dashboard from './components/Dashboard.vue'
import StationCards from './components/StationCards.vue'
import RecentVisits from './components/RecentVisits.vue'
import Announcements from './components/Announcements.vue'
import { getStationDetail } from './api.js'

// Refs
const searchBoxRef = ref(null)
const recentVisitsRef = ref(null)

// State
const selectedStation = ref(null)
const stationDetail = ref(null)
const isLoadingDetail = ref(false)

// 处理搜索框选择
async function handleSelect(item) {
  selectedStation.value = item
  isLoadingDetail.value = true
  
  try {
    stationDetail.value = await getStationDetail(item.code)
    // 添加到最近访问
    recentVisitsRef.value?.addVisit(item)
  } catch (error) {
    console.error('获取详情失败:', error)
    uni.showToast({
      title: '获取详情失败',
      icon: 'none'
    })
    selectedStation.value = null
  } finally {
    isLoadingDetail.value = false
  }
}

// 处理搜索
function handleSearch(query) {
  console.log('搜索:', query)
  // TODO: 跳转到搜索结果页面
  // uni.navigateTo({ url: `/pages/search/result?q=${encodeURIComponent(query)}` })
}

// 快捷搜索（来自热门搜索）
function handleQuickSearch(tag) {
  if (searchBoxRef.value) {
    const input = searchBoxRef.value.$el.querySelector('input')
    if (input) {
      input.value = tag
      input.dispatchEvent(new Event('input'))
      searchBoxRef.value.focus()
    }
  }
}

// 清除详情
function clearDetail() {
  selectedStation.value = null
  stationDetail.value = null
}

// 查看地图
function handleViewMap(location) {
  console.log('查看地图:', location)
  // TODO: 跳转到地图页面
  uni.showToast({
    title: `位置: ${location.lon}, ${location.lat}`,
    icon: 'none'
  })
}

// 处理快捷功能点击
function handleAction(action) {
  console.log('快捷功能:', action)
  // TODO: 根据action.route跳转到对应页面
  uni.showToast({
    title: `即将开放: ${action.name}`,
    icon: 'none'
  })
}

// 处理数据看板点击
function handleDashboardClick(stat) {
  console.log('数据看板:', stat)
  // TODO: 根据stat.route跳转到对应页面
  uni.showToast({
    title: `查看: ${stat.label}`,
    icon: 'none'
  })
}

// 选择测站（来自推荐测站或最近访问）
function handleSelectStation(station) {
  handleSelect(station)
}

// 查看更多测站
function handleMoreStations() {
  console.log('查看更多测站')
  // TODO: 跳转到测站列表页面
  uni.showToast({
    title: '即将开放: 测站列表',
    icon: 'none'
  })
}

// 处理公告点击
function handleAnnouncementClick(item) {
  console.log('公告:', item)
  // TODO: 跳转到公告详情页面
  uni.showToast({
    title: item.title,
    icon: 'none'
  })
}

// 查看更多公告
function handleMoreAnnouncements() {
  console.log('查看更多公告')
  // TODO: 跳转到公告列表页面
  uni.showToast({
    title: '即将开放: 公告列表',
    icon: 'none'
  })
}

onMounted(() => {
  setTimeout(() => {
    searchBoxRef.value?.focus()
  }, 300)
})
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  font-family: 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 顶部头部 */
.top-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 16px 24px;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.logo {
  width: 40px;
  height: 40px;
}

.logo svg {
  width: 100%;
  height: 100%;
}

.brand-name {
  font-size: 20px;
  font-weight: 700;
  background: linear-gradient(135deg, #00d4ff 0%, #0066ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.search-wrapper {
  flex: 1;
  max-width: 600px;
}

/* 主内容区 */
.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 详情弹层 */
.detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fade-in 0.3s ease;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.detail-modal {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slide-up 0.3s ease;
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.detail-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px;
  background: rgba(30, 41, 59, 0.95);
  border-radius: 24px;
  color: #94a3b8;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #00d4ff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 底部 */
.page-footer {
  padding: 32px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
}

.dot {
  opacity: 0.5;
}

/* 响应式 */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 16px;
  }
  
  .brand {
    width: 100%;
    justify-content: center;
  }
  
  .search-wrapper {
    width: 100%;
    max-width: none;
  }
  
  .main-content {
    padding: 20px 16px;
    gap: 24px;
  }
}
</style>
